<template>
    <view class="bg-[#F8F8F8] min-h-screen">
        <view class="mt-[20rpx] px-[40rpx] text-[30rpx] font-medium bg-white pb-[60rpx]">
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF]">
                <text>姓名:</text>
                <input class="ml-[30rpx] " type="text" placeholder="请填写真实姓名">
            </view>
            <view class="py-[34rpx] flex items-center border-b border-[#EFEFEF] w-full">
                <text>性别:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择性别">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>出生日期:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择出生日期">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>政治面貌:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请选择政治面貌">
                <u-icon name="arrow-down" color="#3F3F3F" size="18"></u-icon>
            </view>
            <view class="py-[34rpx]  flex items-center border-b border-[#EFEFEF] w-full">
                <text>联系方式:</text>
                <input class="ml-[30rpx] flex-1 " type="text" placeholder="请输入联系方式">
                
            </view>
            <view class="mt-[105rpx] flex justify-center">
                <view @click="successful =true"
                    class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    确定</view>
            </view>
        </view>
        <u-popup :show="successful" @close="successful = false" mode="center" round="12" :safeAreaInsetBottom="false">
            <view  class=" bg-white flex flex-col items-center w-[80vw] rounded pt-[82rpx] pb-[60rpx]">
                <u-icon name="weixin-circle-fill" color="#28C445" size="57"></u-icon>

                <view class="mt-[32rpx] text-[#FD755D] text-[38rpx] font-bold">去绑定微信>></view>
                <view class="mt-[126rpx] flex justify-center">
                    <view
                        class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                        取消</view>
                </view>
            </view>
      
        </u-popup>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
const selectValue = ref([])
const successful= ref(false)
const checkboxList = ref([{
    name: "保健"
}, {
    name: "器乐"
}, {
    name: "生活艺术"
}, {
    name: "声乐"
}, {
    name: "书画"
}, {
    name: "体育"
}, {
    name: "舞蹈"
}, {
    name: "信息技术"
}, {
    name: "语言文学"
}, {
    name: "服饰表演"
}, {
    name: "戏剧"
}, {
    name: "公益活动"
}, {
    name: "社区活动"
}])
</script>